<template>
  <div>
    <el-container>
      <el-header class="homeHeader">
        <img
          src="https://www.csxbank.com/Upload/Template/yizhu/SiteConfigPhoto/Original/202008/d8afdbe4-f5e2-4897-8f00-8e7b762b7e27.png"
          alt=""
        />
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#f0f0f0"
          active-text-color="#409EFF"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">个人理财</el-menu-item>
          <el-menu-item index="3">我的订单</el-menu-item>
        </el-menu>
        <!-- 用户登录 -->
        <span v-if="!this.$store.state.isLogin">
          <el-button type="primary" round @click="dialogForm = true"
            >登录</el-button
          >
          <!-- <el-button type="primary" round @click="$router.replace('/login')"
            >登录</el-button
          > -->
        </span>
        <el-dropdown v-else class="userInfo">
          <!--可以绑定一个下拉框事件 -->
          <span class="el-dropdown-link"
            >{{ this.$store.state.username }}
            <i><img src="../assets/user4.png" /></i
          ></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-button type="text">个人中心</el-button>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button type="text" @click="quitLogin">退出登录</el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- 登录弹框 -->
        <el-dialog title="登录" :visible.sync="dialogForm" width="30%">
          <el-form :model="loginForm2" :rules="rules" ref="loginForm2">
            <el-form-item prop="mobile">
              <el-input
                type="text"
                autocomplete="false"
                v-model="loginForm2.mobile"
                placeholder="请输入电话号码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                autocomplete="false"
                v-model="loginForm2.password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取消</el-button>
            <el-button type="primary" @click="Login">登录</el-button>
            <el-button type="text" @click="toRegister"
              >没有账号？立即注册</el-button
            >
          </span>
        </el-dialog>
      </el-header>

      <el-container id="main-container">
        <el-aside width="200px" border>
          <el-menu @select="menuClick">
            <el-menu-item index="/spikeMerchandise">秒杀商品</el-menu-item>
            <el-menu-item index="/ProductList">产品列表</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb> -->
          <div class="homeWelcome" v-if="this.$router.currentRoute.path == '/'">
            <h1>{{ this.$store.state.username }},三湘银行欢迎您！</h1>
          </div>
          <router-view />
        </el-main>
      </el-container>

      <el-footer class="homeFooter">Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import md5 from "js-md5";
import { Message } from "element-ui";

export default {
  name: "home",
  data() {
    return {
      loginForm2: {
        mobile: "13568387255",
        password: "2827528315",
        // mobile: "",
        // password: "",
      },
      dialogForm: false,
      rules: {
        mobile: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message:
              "1、长度在 6 到 16 个字符且不包含空格 2、不能为9位以下纯数字",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSelect(key) {
      if (key == 1) this.$router.push("/");
    },
    toRegister() {
      this.$router.push("/register");
    },
    menuClick(index) {
      this.$router.push(index);
    },
    Login() {
      this.$refs.loginForm2.validate((valid) => {
        if (valid) {
          this.dialogForm = false;
          let salt = "1a2b3c4d";
          //加密
          let str =
            "" +
            salt.charAt(0) +
            salt.charAt(2) +
            this.loginForm2.password +
            salt.charAt(5) +
            salt.charAt(4);
          //请求后端登录接口
          let param = new URLSearchParams();
          param.append("mobile", this.loginForm2.mobile);
          param.append("password", md5(str));
          this.$http({
            method:"post",
            url:"/login",
            data:param
          }).then((res)=>{
            if (res.code == 200) {
              this.$store.commit("isLogin", true);
              this.$store.commit("userName", res.data.nickname);
              this.$store.commit("setToken", res.data.Token);
              Message.success("登录成功！");
              //页面跳转
              // this.$router.replace("/"); //replace不能进行网页后退 push可以进行网页后退
              } else {
              Message.error("手机号或密码错误！");
            }
          });
          // post("api/login", param).then((res) => {
          //   if (res.code == 200) {
          //     this.$store.commit("isLogin", true);
          //     this.$store.commit("userName", res.data.nickname);
          //     this.$store.commit("setToken", res.data.Token);
          //     Message.success("登录成功！");
          //     //页面跳转
          //     // this.$router.replace("/"); //replace不能进行网页后退 push可以进行网页后退
          //   } else {
          //     Message.error("手机号或密码错误！");
          //   }
          // });
        } else {
          this.$message.error("请输入所有字段");
          return false;
        }
      });
    },
    quitLogin() {
      // 退出登录
      this.$confirm("您确定退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.commit("isLogin", false);
          this.$store.commit("removeStorage"); // 清除登录信息
          this.$store.commit("initUser"); //清除用户名
          // this.$router.replace("/");
          this.userLogin = false;
          this.$message({
            type: "success",
            message: "注销成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消！",
          });
        });
    },
  },
  computed: {
    //这里需要把store 动态的数据放到computed里面才会同步更新 视图
  },
};
</script>

<style>
.homeHeader {
  background-color: #f0f0f0;
  /* height: 80px !important; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}
.homeWelcome h1 {
  text-align: center;
  font-size: 36px;
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px hsl(40, 28.57% , 28.82%), 2px 2px hsl(40, 28.57% , 28.82%),
                  3px 3px hsl(40, 28.57% , 28.82%), 4px 4px hsl(40, 28.57% , 28.82%);;
}
.el-dropdown-link img {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin-left: 8px;
}
.el-footer {
  background-color: #f0f0f0;
  width: 100%;
  height: 300px !important;
  text-align: center;
  line-height: 300px;
}

.el-aside {
  margin-top: 150px;
}
#main-container {
  width: 1000px;
  margin: auto;
  border: 1px solid rgb(238, 238, 238);
  box-shadow: 0px 5px 5px #cec9c9;
}
</style>